<template>
  <s-table
   class="h100"
    ref="flowConfigTable"
    :columns="columns"
    :data="loadData"
    :showPagination="true"
    rowKey="key"
    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    :scrollX="1200"
  >
    <template #business="text, record">
      <table-ellipsis
        :tableEllipsisIsTurnLine="false"
        :text="record.businessName + '[' + record.businessCode + ']'">
      </table-ellipsis>
    </template>
    <template slot="flow" slot-scope="text, record">
      <a @click="gotoDefinition(record)">
        <table-ellipsis
          :tableEllipsisIsTurnLine="false"
          :text="record.definitionName + '[' + record.definitionCode + ']'">
        </table-ellipsis>
      </a>
    </template>
    <template #remark="text, record">
      <table-ellipsis
        :tableEllipsisIsTurnLine="false"
        :text="record.remark ? record.remark : '-'">
      </table-ellipsis>
    </template>
    <template #creator="text, record">
      <table-ellipsis :text="record.createBy">

      </table-ellipsis>
    </template>
    <template slot="createTime" slot-scope="text">
      <table-ellipsis
        :tableEllipsisIsTurnLine="false"
        :text="text ? $options.filters.moment(text) : '_'">
      </table-ellipsis>
    </template>
    <template #operation="text">
      <span class="set-margin">
        <auth-button type="primary" :ghost="true" size="small" :auth="flowPerms.bussinessType.edit" @click="editTbRow(text)"><i class="iconfont icon-xiugai"/>{{ $t('edit') }}</auth-button>
      </span>
      <span>
        <auth-button type="danger" :ghost="true" size="small" :auth="flowPerms.bussinessType.delete" @click="deleteTbRow(text)"><i class="iconfont icon-shanchu3 deleteUlr"/>{{ $t('delete') }}</auth-button>
      </span>
    </template>
  </s-table>
</template>
<script>
import { mapState } from 'vuex'
import STable from '@/components/Table/index1'
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { relatedConfigTbColumns } from '../config/list'
import { flowPerms } from '@/config/permission/index'
import AuthText from '@/components/AuthText'
import AuthButton from '@/components/AuthButton'
export default {
  components: {
    STable,
    tableEllipsis,
    AuthText,
    AuthButton
  },
  props: {
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.flowRelatedConfig.queryParams
    })
  },
  data () {
    return {
      selectedRowKeys: [],
      columns: relatedConfigTbColumns,
      flowPerms
    }
  },
  methods: {
    // 请求接口数据加载表格
    loadData (parameter) {
      const vm = this
      const JnqueryParam = JSON.parse(JSON.stringify(vm.queryParams))
      // eslint-disable-next-line no-restricted-syntax
      for (const key in JnqueryParam) {
        if (JnqueryParam[key] === '') {
          JnqueryParam[key] = undefined
        }
      }
      this.$refs.flowConfigTable.clearSelected()
      return this.$api.getFlowConfigTableData({ ...parameter, ...JnqueryParam })
    },
    // 表格选择更改
    onSelectChange (selectedRowKeys, selectedRows) {
      console.log('selectedRowKeys changed: ', selectedRowKeys, selectedRows)
      this.selectedRowKeys = selectedRowKeys
      this.$emit('selectedRowchange', selectedRows)
    },
    // 更新表格
    refreshData (isToFirstPage = true) {
      let obj = null
      if (isToFirstPage) {
        obj = { current: 1 }
      }
      this.$refs.flowConfigTable.loadData(obj)
    },
    // 清空表格勾选项
    emptyTableSelction () {
      this.selectedRowKeys = []
    },
    // 点击编辑按钮
    editTbRow (data) {
      this.$emit('operateRow', ['edit', data])
    },
    // 点击删除按钮
    deleteTbRow (data) {
      this.$emit('operateRow', ['delete', data])
    },
    // 查看流程详情
    gotoDefinition (record) {
      this.$router.push({ path: '/flow/designDetail', query: { id: record.definitionId } })
    }
  }
}
</script>
<style lang="less" scoped>
.set-margin {
  margin-right: 12px;
}
</style>
